<template>
	<view class="diy-page-wrap" :style="[heightStyle, themeStyle]">
		<view class="container">
			<slot />
		</view>
		<view v-if="tabbar" class="footer">
			<DiyTabbar />
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
		watch,
		computed
	} from 'vue';
	import DiyTabbar from '@/diy/diy-tabbar/diy-tabbar.vue';
	const props = defineProps({
		tabbar: {
			type: Boolean,
			default: true
		},
		fullscreenScroll: {
			type: Boolean,
			default: true
		},
	});

	const heightStyle = computed(() => {
		return props.fullscreenScroll ? {
			minHeight: '100vh'
		} : {
			height: '100vh'
		};
	});
	
	// 这里定义主题
	const themeStyle = ref({
		// 字体颜色
		'--primary-color': '#000000',
		'--secondary-color': '#333333',
		'--text-color': '#666666',
		'--comment-color': '#999999',
		'--inverse-color': '#ffffff',
		
		// 字体大小
		'--font-2xl':'36rpx',
		'--font-xl':'32rpx',
		'--font-lg':'30rpx',
		'--font-md':'28rpx',
		'--font-sm':'26rpx',
		'--font-xs':'24rpx',
		'--font-2xs':'22rpx',
		
		// 背景颜色
		'--bg-color': '#000000',
		'--bg-inverse-color': '#FFFFFF',
	})
</script>

<style lang="scss" scoped>
	.diy-page-wrap {
		background: #f8f8f8;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.container {
		position: relative;
		display: flex;
		flex: 1;
		flex-direction: column;
		/* 防止内边距影响总高度 */
		box-sizing: border-box;
	}

	.footer {
		height: 100rpx;
		/* 关键：适配全面屏底部安全区域 */
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>